<template>
	<view class="goshop-feedback-container">
		<u-toast ref="uToast"></u-toast>
		<view class="goshop-feedback-question">
			<view>{{issueText}}</view>
			<view class="goshop-feedback-type-wrap">
				<view class="goshop-feedback-type-tag" @tap="form.categoryId = '1'">
					<view class="goshop-feedback-type-tag-text" :class="{active:form.categoryId==='1'}">{{appText}}</view>
				</view>
				<view class="goshop-feedback-type-tag" @tap="form.categoryId = '2'">
					<view class="goshop-feedback-type-tag-text" :class="{active:form.categoryId==='2'}">{{goodText}}</view>
				</view>
				<view class="goshop-feedback-type-tag" @tap="form.categoryId = '3'">
					<view class="goshop-feedback-type-tag-text" :class="{active:form.categoryId==='3'}">{{orderText}}</view>
				</view>
				<view class="goshop-feedback-type-tag" @tap="form.categoryId = '4'">
					<view class="goshop-feedback-type-tag-text" :class="{active:form.categoryId==='4'}">{{merchantText}}</view>
				</view>
				<view class="goshop-feedback-type-tag" @tap="form.categoryId = '5'">
					<view class="goshop-feedback-type-tag-text" :class="{active:form.categoryId==='5'}">{{afterText}}</view>
				</view>
				<view class="goshop-feedback-type-tag" @tap="form.categoryId = '6'">
					<view class="goshop-feedback-type-tag-text" :class="{active:form.categoryId==='6'}">{{logisticsText}}</view>
				</view>
				<view class="goshop-feedback-type-tag" @tap="form.categoryId = '7'">
					<view class="goshop-feedback-type-tag-text" :class="{active:form.categoryId==='7'}">{{otherText}}</view>
				</view>
			</view>
		</view>
		<view class="goshop-feedback-describe">
			<view>{{describeText}}</view>
			<view class="u-p-10">
				<u--textarea v-model="form.content" confirmType="done" :placeholder="filldescribeText" ></u--textarea>
			</view>
		</view>
		<view class="goshop-feedback-img">
			<view>{{imgsText}}</view>
			<view class="u-p-10">
				<u-upload
						:fileList="fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="3"
					></u-upload>
			</view>
		</view>
		<view class="goshop-feedback-contact">
			<view>{{contactText}}</view>
			<view>
				  <u--input
				    border="none"
					v-model="form.contact"
				    :placeholder="contactruleText"
				  ></u--input>
			</view>
		</view>
		<view class="goshop-feedback-good" v-if="form.goodId">
			<view>{{goodidText}}：</view>
			<view>
				{{form.goodId}}
			</view>
		</view>
		<view class="goshop-feedback-submit">
			<u-button type="error" @click="submitForm" :text="submitText"></u-button>
		</view>
	</view>
</template>

<script>
	import {createFeedback} from '@/common/http.api.js'
	import {isEmpty} from '@/utils/utils';
	import config from '@/common/config';
	export default {
		data() {
			return {
				fileList: [],
				form:{
					categoryId:'',
					imgs:[],
					content:'',
					goodId:'',
					contact:''
				},
				issueText:'',
				issueruleText:'',
				appText:'',
				goodText:'',
				orderText:'',
				merchantText:'',
				afterText:'',
				logisticsText:'',
				otherText:'',
				describeText:'',
				filldescribeText:'',
				imgsText:'',
				contactText:'',
				contactruleText:'',
				fillcontactText:'',
				goodidText:'',
				successText:'',
				failText:'',
				submitText:'',
				uploadloadingText:'',
				describeruleText:'',
			};
		},
		onLoad(e){
			debugger
		   if(e.goodId){
			   this.form.goodId = e.goodId;
		   }
		},
		onShow(){
		  this.refresh();	
		},
		methods:{
			refresh(){
				this.issueText = this.$t('feedback.issue.text');
				this.issueruleText = this.$t('feedback.issuerule.text');
				this.appText = this.$t('feedback.app.text');
				this.goodText = this.$t('feedback.good.text');
				this.orderText = this.$t('feedback.order.text');
				this.merchantText = this.$t('feedback.merchant.text');
				this.afterText = this.$t('feedback.after.text');
				this.logisticsText = this.$t('feedback.logistics.text');
				this.otherText = this.$t('feedback.other.text');
				this.describeText = this.$t('feedback.describe.text');
				this.filldescribeText = this.$t('feedback.filldescribe.text');
				this.imgsText = this.$t('feedback.imgs.text');
				
				this.contactText = this.$t('feedback.contact.text');
				this.contactruleText = this.$t('feedback.contactrule.text');
				this.fillcontactText = this.$t('feedback.fillcontact.text');
				this.goodidText = this.$t('feedback.goodid.text');
				this.successText = this.$t('feedback.success.text');
				this.failText = this.$t('feedback.fail.text');
				this.submitText = this.$t('common.submit.text');
				this.uploadloadingText = this.$t('common.uploadloading.text');
				
				this.describeruleText = this.$t('feedback.describerule.text');
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: that.uploadloadingText
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let json = JSON.parse(result);
					if(json.code === 0){
						let item = this.fileList[fileListLen]
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: json.data
						}))
						fileListLen++
					}
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + '/app/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							"tenant-id": config.tenantId //token校验
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						},
						complete: (res)=>{
							let json = JSON.parse(res.data);
							if(json.code != 0){
								this.fileList.splice(this.fileList.length-1, 1)
								this.$refs.uToast.show({
									message: json.msg,
									type: 'error',
								})
							}
						}
					});
				})
			},
			submitForm(){
				let that = this;
				if(isEmpty(this.form.content)){
					this.$refs.uToast.show({
						message: that.describeruleText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.categoryId)){
					this.$refs.uToast.show({
						message: that.issueruleText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.contact)){
					this.$refs.uToast.show({
						message: that.contactruleText,
						type: 'error',
					})
					return;
				}
				this.form.imgs=[];
				for (let i = 0; i < this.fileList.length; i++) {
					let item = this.fileList[i];
					debugger
					this.form.imgs.push(item.url);
				}
				createFeedback(this.form).then(res => {
					if (res.code === 0) {
						debugger
						this.$refs.uToast.show({
							message: that.successText,
							type: 'success'
						})
						uni.hideLoading();
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							});
						}, 1000);
					} else {
						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							title: that.failText,
							content: res.msg,
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.goshop-feedback-container{
	.goshop-feedback-question{
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;
		.goshop-feedback-type-wrap{
			 //display: inline-flex;
			 //flex-flow: row wrap;
			 margin-top: 10rpx;
			 display: flex;
			 flex-wrap: wrap;
			 align-content: flex-start;
			 .goshop-feedback-type-tag{
				 box-sizing: border-box;
				 //margin-left: 20rpx;
				 flex: 0 0 25%;
				 padding: 5rpx;
				 padding: 4rpx;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 .goshop-feedback-type-tag-text{
					 border: 2rpx solid $goshop-color-auxiliary-four;
					 padding: 8rpx;
					 &.active {
						border: 2rpx solid $goshop-color-primary;
						color: $goshop-color-auxiliary-one;
					 	background-color: $goshop-color-primary;
					 }
				 }
			 }
		}
	}
	.goshop-feedback-describe{
		margin-top: 20rpx;
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;	
	}
	.goshop-feedback-img{
		margin-top: 20rpx;
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;	
	}
	.goshop-feedback-contact{
		margin-top: 20rpx;
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;	
	}
	.goshop-feedback-good{
		margin-top: 20rpx;
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;	
		display: flex;
	}
	.goshop-feedback-submit{
		padding: 20rpx;	
	}
}
</style>
